<!DOCTYPE html>
<html>

<head>
    <title>我的消息</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="/js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <script src="/js/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/message.css"/>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script>
        $(function () {
            var userId = getParams().id;
            var currentPage = 1;
            var pages;
            var msg;

            /*渲染界面函数*/
            function renderView(ele, data) {
                ele.renderValues(data, {
                    handle: function (ele, value) {
                        if (value == false) {
                            $(ele).css("display", "");
                        }
                    },hrefHandle:function (ele,value) {
                        ele.href="/mine/messageDetail.html?userId="+userId+"&senderId="+value
                    }
                })
            }

            /*查询该用户所有消息.
            包括已读,未读,时间倒序,如果未读,有个标记
            * */
            $.get("/users/" + userId + "/privateMessages", function (data) {
                pages = data.pages;
                msg = data.list;
                renderView($(".msg"), {list: msg});

            });
            /*翻页渲染*/
            $(window).scroll(function () {
                if (isEnd()) {
                    if (currentPage < pages) {
                        currentPage++;
                        $.get("/users/" + userId + "/privateMessages", {currentPage: currentPage}, function (data) {
                            msg = $.merge(msg, data.list);
                            renderView($(".msg"), {list: msg});
                        });
                    }
                    else {
                        $(document).dialog({
                            type: "notice",
                            infoText: "没有更多了",
                            autoClose: 1000,
                            position: "center"
                        });
                    }
                }
            });

        })
    </script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>我的消息</span>
        </div>
        <div class="col"></div>
    </div>
</div>


<!--渲染消息-->
<div class="container msg">
    <dl class="itemList" render-loop="list">

        <dd render-attr="mid=list.id">
            <a render-key="list.sender.id" render-fun="hrefHandle">
            <p><img class="rounded-circle" width=40px height="40px" render-src="list.sender.headImgUrl">
                <span render-html="list.sender.nickName" style="color:  #ff8a00"></span>
                <span>给你发送了</span><span></span><span>消息:</span>
                <span class="badge badge-pill badge-danger readMark"
                      render-key="list.state" render-fun="handle"
                      style="display: none;">未读</span>
            </p>
            <p><span render-html="list.sendTime"></span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </p>
            </a>
        </dd>

    </dl>
</div>

</body>

</html>